<template>
  <el-form-item label="" class="attachment-section">
    <ImageComponent
      :src="FirstData.personPhoto"
      width="100px"
      height="100px"
      borderRadius="6px"
    />
    <div class="attachment-info">
      <div class="attachment-label">附件简历：</div>

      <attachment
        v-if="FirstData.resumeFile && FirstData.resumeFile != null"
        :employeeResignFileVoList="FirstData.resumeFile"
      >
      </attachment>
    </div>
  </el-form-item>
</template>

<script setup>
import ImageComponent from "@/components/ImageComponent.vue";
import { Document } from "@element-plus/icons-vue";

import attachment from "@/components/attachment.vue";
import { seeFileView, getFileName } from "@/utils/fileView.js";

const props = defineProps({
  FirstData: Array,
});

console.log(props.FirstData, "FirstDatachildre");
</script>

<style scoped>
.avatar-container {
  margin-right: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
  /* border-radius: 50%; */
  object-fit: cover;
}

.attachment-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  font-size: 14px;
  text-align: left;
  margin-left: 35px;
}

.attachment-label {
  font-weight: bold;
  color: #16191d;
  margin-bottom: 10px;
  font-size: 14px;
}
.attachment-section {
  margin-bottom: 20px;
}

.file-attachment {
  width: 100%;
  font-size: 12px;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 1px;
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

.file-item .el-icon {
  margin-right: 10px;
  color: #409eff;
}

.file-name {
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 显示省略号 */

  color: #409eff;
  text-decoration: none;
  cursor: pointer;
}

.file-name:hover {
  text-decoration: underline;
}
</style>
